<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="1000" ref="dialogBodyRef" @open="openDialog">
  <!-- <ContentWrap> -->
      <!-- 搜索工作栏 -->
      <!-- <el-form
        class="-mb-15px"
        :model="queryParams"
        ref="queryFormRef"
        :inline="true"
        label-width="90px"
      >
      <el-form-item label="供应商编号" prop="supplier">
          <el-input
            v-model="queryParams.supplier"
            placeholder="请输入供应商编号"
            clearable
            class="!w-240px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="审核标志" prop="auditMark">
          <el-input
            v-model="queryParams.auditMark"
            placeholder="请输入审核标志"
            clearable
            class="!w-240px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="批次号" prop="code">
          <el-input
            v-model="queryParams.code"
            placeholder="请输入批次号"
            clearable
            class="!w-240px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="织板编码" prop="materialCode">
          <el-input
            v-model="queryParams.materialCode"
            placeholder="请输入织板编码"
            clearable
            class="!w-240px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>

        <el-form-item>
          <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
          <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
          <el-button
                type="warning"
                plain
                @click="handleImport"
                v-hasPermi="['system:user:import']"
              >
                <Icon icon="ep:upload" /> 导入
              </el-button>
 
        </el-form-item>
      </el-form>
    </ContentWrap> -->
  <!-- 列表 -->
  <ContentWrap>
      <el-table v-loading="detailLoading" :data="list.list">
        <!-- <el-table-column label="供应商编号" align="center" prop="supplier" width="100"/> -->
        <el-table-column label="供应商" align="center" prop="supplierName" />
        <el-table-column label="规格型号" align="center" prop="specification" />
        <el-table-column label="收料仓库" align="center" prop="warehouse" />
        <el-table-column label="织板编码" align="center" prop="materialCode" />
        <el-table-column label="物料名称" align="center" prop="materialName" />
        <el-table-column label="类型" align="center" prop="materialType" />
        <el-table-column label="操作员" align="center" prop="operator" />
        <el-table-column label="应收数量" align="center" prop="receivableNum" />
        <el-table-column label="实收数量" align="center" prop="actualNum" />
        <el-table-column label="单位" align="center" prop="unit" />
        <el-table-column label="备注" align="center" prop="remark" />
      </el-table>
      <!-- 分页 -->
      <Pagination
        :total="list.total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </ContentWrap>
  </Dialog>
  </template>

  <style lang="scss" scoped>
    .com-dialog .el-dialog__body {
      height: 500px !important;
      overflow: scroll !important;
    }
  </style>
  
  <script lang="ts" setup>
  // import download from '@/utils/download'
  import * as materialStorageApi from '@/api/hcxly/materialStorage/Index'
  // import maStorageImportForm from './maStorageImportForm.vue'
  // import materialStorDetail from './materialStorDetail1.vue'
  
  defineOptions({ name: 'materialStorDetail' })
  
  const message = useMessage() // 消息弹窗
  const { t } = useI18n() // 国际化
  
  const detailLoading = ref(false) // 表单的加载中
  const total = ref(0) // 列表的总页数
  const list = ref([]) // 列表的数据
  // const queryFormRef = ref() // 搜索的表单

  const dialogVisible = ref(false) // 弹窗的是否展示
  const dialogTitle = ref('') // 弹窗的标题
  const queryParams = reactive({
    pageNo: 1,
    pageSize: 10,
    receiptCode: ''
  })

  /** 打开弹窗 */
  const open = async (id: string) => {
    queryParams.receiptCode = id
    console.log(id)
    console.log(queryParams)
    dialogVisible.value = true
    dialogTitle.value = '详情'
    // 修改时，设置数据
    if (id) {
      getList()
    }
  }
  defineExpose({ open }) // 提供 open 方法，用于打开弹窗
  
  /** 查询列表 */
  const getList = async () => {
    detailLoading.value = true
      try {
        list.value = await materialStorageApi.getMaStoDetail(queryParams)
        console.log(list.value)
      } finally {
        detailLoading.value = false
      }
  }

  /** 设置dialog高度 */
  const dialogBodyRef = ref()
  const openDialog = () => {
  // 获取对话框 body 的 DOM 元素
  const dialogBodyRefInstance = dialogBodyRef.value;
  console.log(dialogBodyRefInstance.dialogContentRef);
  dialogBodyRefInstance.style = "height: 200px";
}

  </script>